<template>
	<view class="m-h-100 u-flex u-flex-col">
		<!-- 文章标题区域 -->
		<view class="xxxl u-padding-35 u-padding-top-45 u-font-weight-500 white">{{ articleInformation.title || '' }}</view>
		<view class="u-padding-left-35 u-padding-right-35 nr w-100">
			<text class="u-padding-right-25 white">蓝豹咨迅</text>
			<text class="u-padding-right-25 auxiliary-information white">{{ articleInformation.create_time || '' }}</text>
		</view>

		<!-- 发圈配文 -->
		<u-popup v-model="imageGridPopup" mode="center" width="80%" border-radius="15" closeable>
			<view class="u-text-center" style="background: linear-gradient( 180deg, #D2E8FA 0%, #FFFFFF 100%);">
				<image style="width: 20vw;" class="u-margin-top-35" src="https://resource.lanbaozixun.com/uploads/images/20250207211904944568564.png" mode="widthFix"></image>
				<view class="font-weight bold xl u-text-center u-padding-left-10 u-color-3F70FF">文案复制成功</view>
				<view class="u-padding-25 nr u-color-666">
					{{articleInformation.fq_synopsis||''}}
				</view>
			</view>
		</u-popup>

		<!-- 海报弹窗 -->
		<u-popup v-model="placardPopup" mode="bottom" closeable>
			<view class="placard-wrap">
				<view class="u-text-center u-padding-25">
					宣传海报
				</view>
				<invite-poster v-if="placardPopup" :isShowImagee="true" :config="{
					link: urlLink,
					qrCode: '',
					poster: articleInformation.poster,
					bottom: articleInformation.qr_code_x || 10,
					right: articleInformation.qr_code_y || 10,
					width: articleInformation.qr_code_w || 180,
					height: articleInformation.qr_code_h || 180
				}" @loaderSuccess="posterLoaderSuccess"></invite-poster>
			</view>
		</u-popup>
		<BusinessCard :cardInfo="articleInformation.user_business_card"></BusinessCard>
		<!-- 主要内容区域 -->
		<view class="main-content-area u-flex-1 u-flex u-flex-col w-100">
			

			<!-- 文章内容 -->
			<view class="content-area u-padding-25 u-flex-1 w-100">
				<u-parse :html="articleInformation.content"></u-parse>
			</view>

			<!-- 产品展示区域 -->
			<view class="product-area u-margin-25 bg-white u-border-radius-10 w-100">
				<template v-if="articleInformation.goods_list && articleInformation.goods_list.length">
					<swiper circular :autoplay="true" :interval="3000" :duration="300" style="height: 97px;">
						<swiper-item v-for="(item, index) in articleInformation.goods_list" :key="index">
							<view class="product-item u-margin-25 u-border-radius-10 bg-white">
								<view class="u-flex">
									<view class="u-flex u-flex-1">
										<text class="u-padding-right-15 xl bold din-font">{{ item.name }}</text>
										<u-tag :text="item.advantage"></u-tag>
									</view>
								</view>
								<view class="u-flex u-padding-top-20">
									<view class="u-flex-1 u-flex">
										<view class="u-flex-1">
											<view class="u-flex-baseline u-line-1">
												<text
													class="xxxl u-color-0099FF bold u-line-1 din-font">{{ item.limit }}</text>
												<text class="xs gray u-padding-left-5">万</text>
											</view>
											<view class="xs gray u-margin-top-5">最高额度</view>
										</view>
										<view class="u-flex-1">
											<view class="u-flex-baseline u-line-1">
												<text
													class="xxxl u-color-0099FF bold u-line-1 din-font">{{ item.rate }}</text>
												<text class="xs gray u-padding-left-5">%</text>
											</view>
											<view class="xs gray u-margin-top-5">年化利率</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</template>

				<template v-if="(articleInformation.goods_list && articleInformation.goods_list.length <= 0) && articleInformation.user_business_card.is_self == 1">
					<view class="add-product-area u-flex"
						@click="handleShowProductPopup">
						<!-- <u-icon name="plus-circle-fill" size="70" class="u-color-0099FF"></u-icon>
						<view class="u-padding-left-15">
							<view class="nr bold u-padding-bottom-5 u-color-0099FF">立即插入产品广告</view>
							<view class="xs u-color-666666">如未添加产品.分享后将不展示此模块</view>
						</view> -->
						<image class="w-100" src="https://resource.lanbaozixun.com/uploads/images/20250207210326789db4901.png" mode="widthFix"></image>
					</view>
				</template>
				<view v-if="articleInformation.user_business_card && articleInformation.user_business_card.is_vip == 0 && articleInformation.user_business_card.is_self == 1"
					class="hint-buy-vip-area white u-border-radius-10 u-flex-col u-col-center u-row-center">
					<image @click="toPage('/pages/user_vip/user_vip')" style="width: 100%;" src="https://resource.lanbaozixun.com/uploads/images/202502072105057fda79377.png" mode="widthFix"></image>
				</view>
			</view>

			<!-- 底部操作栏 -->
			<view v-if="articleInformation.user_business_card && articleInformation.user_business_card.is_self == 1"
				class="footer-area u-padding-top-25 u-padding-bottom-25 w-100 bg-white u-flex">
				<!-- 悬浮菜单 -->
				<view class="suspension-region u-padding-25" v-show="suspensionShowStatus">
					<u-icon name="close-circle" size="40" class="u-color-666666 close-icon"
						@click="handleCloseSuspension"></u-icon>
					<template v-if="articleInformation.user_business_card.is_vip == 0 && articleInformation.user_business_card.is_self == 1">
						<view class="hint-buy-vip-area u-flex u-row-between">
							<text class="bold u-color-0099FF">解锁会员特权，助您轻松引领行业潮流!</text>
							<navigator hover-class="none" url="/pages/user_vip/user_vip" class="go-buy-btn xs u-font-weight-500">立即解锁</navigator>
						</view>
					</template>
					<template v-else>
						<view class="u-flex">
							<navigator :url="'/yixu/pages/article_acquisition/edit?id=' + articleInformation.id"
								hover-class="none" class="u-flex-1 u-text-center">
								<u-icon name="edit-pen" size="45" class="u-color-0099FF"></u-icon>
								<view class="xs u-padding-top-5 u-color-666666">编辑文章</view>
							</navigator>
							<navigator url="/yixu/pages/network_square/my_business_card/index" hover-class="none"
								class="u-flex-1 u-text-center">
								<u-icon name="account" size="45" class="u-color-0099FF"></u-icon>
								<view class="xs u-padding-top-5 u-color-666666">修改名片</view>
							</navigator>
						</view>
					</template>
				</view>

				<!-- 底部按钮组 -->
				<view class="u-flex" style="width: 45%;">
					<view class="u-flex-1 u-text-center" @click="handleShowProductPopup">
						<u-icon name="https://resource.lanbaozixun.com/uploads/images/20250207205439628d73400.png" size="45" class="u-color-666666"></u-icon>
						<view class="xs u-padding-top-5">产品管理</view>
					</view>
					<view class="u-flex-1 u-text-center" @click="handleMoreClick">
						<u-icon :name="showMoreStatus ? 'arrow-down-fill' : 'more-circle'" size="45"
							class="u-color-666666"></u-icon>
						<view class="xs u-padding-top-5">更多</view>
					</view>
				</view>
				<view class="u-flex-1 u-flex white ">
					<view class="send-btn u-flex" @click="onShowImageGridPopup">
						<image src="https://resource.lanbaozixun.com/uploads/images/20250207205439e880c7353.png" mode="widthFix" class="icon-xs"></image>
						<view class="u-padding-left-5">
							发圈配文
						</view>
					</view>
					<view class="generate-btn u-flex " @click="onShowPlacard">
						<image src="https://resource.lanbaozixun.com/uploads/images/202502072054396a6123934.png" mode="widthFix" class="icon-xs"></image>
						<view class="u-padding-left-10">
							生成海报
						</view>
					</view>
				</view>
			</view>
			<view
				v-else-if="articleInformation.user_business_card && articleInformation.user_business_card.is_vip == 1 && articleInformation.user_business_card.is_self == 0"
				class="footer-area u-padding-top-25 u-padding-bottom-25 w-100 bg-white u-flex">
				<view class="u-flex-1 u-flex u-padding-left-25">
					<u-avatar :src="articleInformation.user_business_card.avatar" :size="64"></u-avatar>
					<text class="nr bold u-padding-left-20">{{ articleInformation.user_business_card.name || '' }}</text>
				</view>
				<view class="u-flex-1 u-flex white">
					<view class="send-btn u-margin-right-15" v-if="articleInformation.user_business_card.tel" @click="mallPhoneCall(articleInformation.user_business_card.tel)">电话咨询</view>
					<view class="generate-btn" v-if="articleInformation.user_business_card.wechat_code || articleInformation.user_business_card.wechat_qr_code" @click="wechatPopup = true">添加微信</view>
				</view>
			</view>
		</view>
		<u-popup v-model="wechatPopup" mode="bottom" closeable>
			<view class="placard-wrap" v-if="articleInformation.user_business_card">
				<view class="u-text-center u-padding-25" v-if="articleInformation.user_business_card.wechat_code" >
					微信号:{{ articleInformation.user_business_card.wechat_code || '' }}
				</view>
				<image v-if="articleInformation.user_business_card.wechat_qr_code" :src="articleInformation.user_business_card.wechat_qr_code" mode="widthFix" style="width: 150rpx;height: 150rpx;"></image>
			</view>
		</u-popup>
		<user-product-popup ref="userProductPopup" :businessCardInformation="articleInformation.user_business_card"
			:article-id="articleInformation.id" @confirm="onConfirmProduct"></user-product-popup>
		<!-- 加载中 -->
		<xy-loading v-if="loadingShowStatus"></xy-loading>
		<hint-buy-vip-message ref="hintBuyVip"></hint-buy-vip-message>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getArticleInformation,
		updateShareInformation
	} from '@/api/publicArticle'
	import Cache from "@/utils/cache"
	import wechath5 from '@/utils/wechath5'
	import BusinessCard from './components/business_card'
	export default {
		components:{BusinessCard},
		data() {
			return {
				startupParameters: {},
				urlLink: '',
				wechatPopup: false,
				showLoading: false,
				showMoreStatus: false,
				loadingShowStatus: true,
				articleInformation: {},
				suspensionShowStatus: false,
				imageGridPopup: false,
				placardPopup: false
			}
		},

		async onLoad(e) {
			this.startupParameters = e;
			// #ifdef H5
			this.urlLink = window.location.href;
			// #endif
			await this.initData()
			uni.$on('REFRESH_INFO', this.initData)
		},

		methods: {
			...mapActions(['getUser']),
			isUserShowProduct(){
				let show = true;
				if(this.articleInformation.user_business_card.is_vip == 0)show = false;
				let goodsLists = this.articleInformation.user_business_card.goods_list
				if(this.$u.test.isEmpty(goodsLists) || goodsLists.length <= 0)show = false;
				return show;
			},
			async initData() {
				this.loadingShowStatus = true
				const {
					data
				} = await getArticleInformation({
					id: this.startupParameters.id,
					user_id: this.startupParameters.user_id || 0
				}, 1)
				wechath5.share({
					shareTitle: data.title,
					shareLink: "yixu/pages/article_acquisition/info?id=" + data.id + '&user_id=' + this.startupParameters.user_id,
					shareImage: data.cover,
					shareDesc: data.synopsis
				})
				Cache.set("shareInfo", {
					h5_share_image: data.cover,
					h5_share_title: data.title,
					h5_share_intro: data.synopsis
				})
				this.articleInformation = data
				this.loadingShowStatus = false
			},

			handleCloseSuspension() {
				this.suspensionShowStatus = false
				this.showMoreStatus = false
			},

			handleMoreClick() {
				this.suspensionShowStatus = true
				this.showMoreStatus = !this.showMoreStatus
			},

			handleShowProductPopup() {
				this.$refs.userProductPopup.showPopup()
			},

			async onConfirmProduct(ids) {
				if (!ids.length) return

				const {
					code
				} = await updateShareInformation({
					article_id: this.articleInformation.id,
					field: 'product_id',
					value: ids.join(',')
				})

				if (code === 1) {
					await this.initData()
				}
			},

			onPreviewImages(index) {
				uni.previewImage({
					urls: this.articleInformation.images,
					current: index
				})
			},

			onShowImageGridPopup() {
				this.copyFqSynopsisContent()
			},
			copyFqSynopsisContent(){
				const _this = this;
				uni.setClipboardData({
					showToast:false,
					data: _this.articleInformation.fq_synopsis,
					success() {
						_this.imageGridPopup = true
					}
				});
			},

			onShowPlacard() {
				let _this = this;
				if(_this.articleInformation.user_business_card.is_card == 0){
					uni.redirectTo({
						url:'/yixu/pages/network_square/my_business_card/edit'
					})
				}else if(_this.articleInformation.user_business_card.is_vip != 1){
					this.$refs.hintBuyVip.show()
					return false
				}else{
					uni.navigateTo({
						url:`/yixu/pages/article_acquisition/poster?id=${_this.articleInformation.id}&user_id=${_this.articleInformation.user_business_card.user_id}`
					})
				}
			},
			mallPhoneCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			toPage(url){
				uni.navigateTo({
					url
				})
			}
		},
		onShareTimeline() {
			const {
				articleInformation
			} = this;
			return {
				title: articleInformation.title,
				imageUrl: articleInformation.cover,
				summary: articleInformation.synopsis,
				path: "yixu/pages/article_acquisition/info?id=" + this.id + '&user_id=' + this.startupParameters.user_id,
			};
		},
		async onShareAppMessage() {
			const {
				articleInformation
			} = this;
			console.log({
				title: articleInformation.title,
				imageUrl: articleInformation.cover,
				summary: articleInformation.synopsis,
				path: "yixu/pages/article_acquisition/info?id=" + this.id + '&user_id=' + this.startupParameters.user_id,
			})
			return {
				title: articleInformation.title,
				imageUrl: articleInformation.cover,
				summary: articleInformation.synopsis,
				path: "yixu/pages/article_acquisition/info?id=" + this.id + '&user_id=' + this.startupParameters.user_id,
			};
		},
	}
</script>

<style lang="scss" scoped>
	page {
		min-height: 100vh;
		background: url('https://resource.lanbaozixun.com/uploads/images/20250207202913b1a393775.png') no-repeat;
		background-size: 100% auto;

		.placard-wrap {
			// width: 90vw;
		}

		.image-9 {
			background-color: white;
			width: 90vw;
			border-radius: 20rpx;
			padding: 30rpx;
			text-align: center;
		}

		.image-9-grid-wrap {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10rpx;
		}

		.m-h-100 {
			min-height: 100vh;
		}

		uni-swiper {
			height: 230rpx;
		}

		.auxiliary-information {
		}

		.auxiliary-user-information {
			color: rgba(0, 0, 0, 0.5);
		}

		.main-content-area {
			
			.content-area{
				border: 3rpx solid white;
				border-radius: 20rpx;
				background: linear-gradient( 180deg, #D5E5FF 0%, #F7F9FF 100%);
			}

			.add-user-business-card-area {
				background: #E9F3FC;
				border-radius: 20rpx;
				border: 1px solid #A1D6FF;
			}

			.user-information-area-bg {
				background: #313140;
			}

			.user-information-area {
				border-radius: 22rpx;

				.user-information-show-area {
					background: url('https://resource.lanbaozixun.com/uploads/images/20240921135703a68a01568.png') no-repeat;
					background-size: 100% 100%;

					.left-interval,
					.right-interval {
						position: relative;

						&::before,
						&::after {
							content: '';
							width: 2rpx;
							height: 40rpx;
							position: absolute;
							background: #CCCCCC;
							top: calc(50% - 20rpx);
						}

						&::before {
							left: 0;
						}

						&::after {
							right: 0;
						}
					}
				}

				.hint-buy-vip-area {
					color: #FFE5CE;
				}
			}

			.product-area {
				width: calc(100% - 50rpx);
				position: relative;

				.hint-buy-vip-area {
					position: absolute;
					inset: 0;
					// background-color: rgba(0, 0, 0, 0.7);
				}
			}

			.footer-area {
				bottom: 0;
				position: sticky;

				.generate-btn,
				.send-btn {
					padding: 15rpx 25rpx;
				}

				.send-btn {
					background: #39A954;
					border-radius: 10rpx 0 0 10rpx;
				}

				.generate-btn {
					background: #3F70FF;
					border-radius: 0 10rpx 10rpx 0;
				}

				.suspension-region {
					left: 25rpx;
					right: 25rpx;
					bottom: 120%;
					position: absolute;
					background: #E9F3FC;
					border-radius: 10rpx;
					border: 1px solid #A1D6FF;

					.close-icon {
						top: -20rpx;
						right: -20rpx;
						position: absolute;
					}
				}
			}
		}

		.go-buy-btn {
			color: #525252;
			background: linear-gradient(90deg, #F0B594 0%, #FFE5CE 100%);
			border-radius: 100rpx;
			padding: 8rpx 20rpx;
			border: 2rpx solid #E4CBCB;
		}

		.gray {
			color: #939599;
		}
	}
</style>